<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/5/21
  Time: 20:26
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<c:set var="path" value="${pageContext.request.contextPath}"></c:set>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">

    <title>订单详情</title>

    <link href="${path}/AmazeUI-2.4.2/assets/css/admin.css" rel="stylesheet" type="text/css">
    <link href="${path}/AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css">

    <link href="${path}/css/personal.css" rel="stylesheet" type="text/css">
    <link href="${path}/css/orstyle.css" rel="stylesheet" type="text/css">

    <script src="${path}/AmazeUI-2.4.2/assets/js/jquery.min.js"></script>
    <script src="${path}/AmazeUI-2.4.2/assets/js/amazeui.js"></script>
    <!-- layui的js -->
    <script src="${path}/layuiadmin/layui/layui.js" charset="utf-8"></script>
    <!-- layui使用的样式-->
    <link rel="stylesheet" href="${path}/layuiadmin/layui/css/layui.css" media="all">

</head>

<body>
<article>
    <div class="mt-logo">
        <!--头 -->
        <header>
            <jsp:include page="header.jsp"></jsp:include>
        </header>
    </div>
</article>
<div class="nav-table">
    <div class="long-title"><span class="all-goods">全部分类</span></div>
    <jsp:include page="navigation.jsp"></jsp:include>
</div>
<b class="line"></b>
<div class="center">
    <div class="col-main">
        <div class="main-wrap">

            <div class="user-orderinfo">

                <!--标题 -->
                <div class="am-cf am-padding">
                    <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">订单详情</strong> / <small>Order&nbsp;details</small></div>
                </div>
                <hr/>
                <!--进度条-->
                <div class="m-progress">
                    <div class="m-progress-list" id="jingdutiao_style">
                        <span class="step-1 step">
                                   <em class="u-progress-stage-bg"></em>
                                   <i class="u-stage-icon-inner">1<em class="bg"></em></i>
                                   <p class="stage-name">拍下商品</p>
                                </span>
                        <span class="step-2 step">
                                   <em class="u-progress-stage-bg"></em>
                                   <i class="u-stage-icon-inner">2<em class="bg"></em></i>
                                   <p class="stage-name">卖家发货</p>
                                </span>
                        <span class="step-3 step">
                                   <em class="u-progress-stage-bg"></em>
                                   <i class="u-stage-icon-inner">3<em class="bg"></em></i>
                                   <p class="stage-name">确认收货</p>
                                </span>
                        <span class="step-4 step">
                                   <em class="u-progress-stage-bg"></em>
                                   <i class="u-stage-icon-inner">4<em class="bg"></em></i>
                                   <p class="stage-name">交易完成</p>
                                </span>
                        <span class="u-progress-placeholder"></span>
                    </div>
                    <div class="u-progress-bar total-steps-2">
                        <div class="u-progress-bar-inner"></div>
                    </div>
                </div>
                <div class="order-infoaside">
                    <div class="order-logistics">
                        <a href="logistics.html">
                            <div class="icon-log">
                                <i><img src="${path}/images/receive.png"></i>
                            </div>
                            <div class="latest-logistics">
                                <p class="text"><!--已签收,签收人是青年城签收，感谢使用天天快递，期待再次为您服务--></p>
                                <div class="time-list">
                                    <span class="date"><!--2015-12-19--></span><span class="week"><!--周六--></span><span class="time"><!--15:35:42--></span>
                                </div>
                                <div class="inquire">
                                    <span class="package-detail"><!--物流：天天快递--></span>
                                    <span class="package-detail"><!--快递单号: --></span>
                                    <span class="package-number"><!--373269427868--></span>
                                    <a href="#"><!--查看--></a>
                                </div>
                            </div>
                            <span class="am-icon-angle-right icon"></span>
                        </a>
                        <div class="clear"></div>
                    </div>
                    <div class="order-addresslist">
                        <div class="order-address">
                            <div class="icon-add">
                            </div>
                            <p class="new-tit new-p-re">
                                <span class="new-txt">小叮当</span>
                                <span class="new-txt-rd2">159****1622</span>
                            </p>
                            <div class="new-mu_l2a new-p-re">
                                <p class="new-mu_l2cw">
                                    <span class="title">收货地址：</span>
                                    <span class="street">雄楚大道666号(中南财经政法大学)</span></p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="order-infomain">

                    <div class="order-top">
                        <div class="th th-item">
                            <td class="td-inner">商品</td>
                        </div>
                        <div class="th th-price">
                            <td class="td-inner">单价</td>
                        </div>
                        <div class="th th-number">
                            <td class="td-inner">数量</td>
                        </div>
                        <div class="th th-operation">
                            <td class="td-inner">商品操作</td>
                        </div>
                        <div class="th th-amount">
                            <td class="td-inner">合计</td>
                        </div>
                        <div class="th th-status">
                            <td class="td-inner">交易状态</td>
                        </div>
                        <div class="th th-change">
                            <td class="td-inner">交易操作</td>
                        </div>
                    </div>

                    <div class="order-main">

                        <div class="order-status3">
                            <div class="order-title">
                                <div class="dd-num">订单编号：<a id="orderNum">1601430</a></div>
                                <span id="orderTime">成交时间：2015-12-20</span>
                                <!--    <em>店铺：小桔灯</em>-->
                            </div>
                            <div class="order-content">
                                <div class="order-left">
                                    <ul class="item-list">
                                        <li class="td td-item">
                                            <div class="item-pic">
                                                <a href="#" class="J_MakePoint">
                                                    <img src="${path}/images/kouhong.jpg_80x80.jpg" id="img_url_show" class="itempic J_ItemImg">
                                                </a>
                                            </div>
                                            <div class="item-info">
                                                <div class="item-basic-info">
                                                    <a href="#">
                                                        <p>美康粉黛醉美唇膏 持久保湿滋润防水不掉色</p>
                                                        <p class="info-little">颜色：12#川南玛瑙
                                                            <br/>包装：裸装 </p>
                                                    </a>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="td td-price">
                                            <div class="item-price">
                                                333.00
                                            </div>
                                        </li>
                                        <li class="td td-number">
                                            <div class="item-number">
                                                <span>×</span>2
                                            </div>
                                        </li>
                                        <li class="td td-operation">
                                            <div class="item-operation">
                                               <!-- 退款/退货-->
                                            </div>
                                        </li>
                                    </ul>

                                </div>
                                <div class="order-right">
                                    <li class="td td-amount">
                                        <div class="item-amount">
                                            合计：676.00
                                           <!-- <p>含运费：<span>10.00</span></p>-->
                                        </div>
                                    </li>
                                    <div class="move-right">
                                        <li class="td td-status">
                                            <div class="item-status">
                                                <p class="Mystatus">卖家已发货</p>
                                              <!--  <p class="order-info"><a href="logistics.html">查看物流</a></p>
                                                <p class="order-info"><a href="#">延长收货</a></p>-->
                                            </div>
                                        </li>
                                        <li class="td td-change">
                                            <div class="am-btn am-btn-danger anniu" onclick="getOrderMessage()">
                                                确认收货</div>
                                        </li>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>

        </div>
        <!--底部-->
        <div class="footer">

            <div class="footer-bd">
                <p>
                    <em>Copyright © 2006-2019 YONGHUI SUPERSTORES, All Rights Reserved小馋猫超市·版权所有  中国福建省厦门市软园24号  客服中心：86-591-83758880 4000601933</em>
                </p>
            </div>
        </div>

    </div>
    <jsp:include page="aside.jsp"></jsp:include>
</div>

<script>
    //***********页面加载
    $(function () {
       // alert(${orderNum})
        var userid = "${user.userid}"+"a";
        if(userid != "a") {
            layui.use(['laypage', 'layer'], function () {
                var laypage = layui.laypage, layer = layui.layer;
                //  layer.msg('玩命提示中');
                // layer.load(0, {shade: false});//0代表加载的风格，支持0-2
            })
            getOrderMessage();
        }else {
            window.location.href="${path}/login";
        }
    })
    //***********请求订单的详细信息**************
    function getOrderMessage() {
            $.ajax({
                url:"${path}/flashorder.action/showorderinfo",
                type:"GET",
                data:{
                    orderNum:"${orderNum}"
                },
                success:function (data) {
                    if(data.code==0){//有活动数据
                        //数据展示模块
                        var dataMessage = data.data[0];
                        showOrderMessage(dataMessage);
                    }else{//没有活动数据，返回错误信息
                        layui.use(['laypage', 'layer'], function () {
                            var laypage = layui.laypage, layer = layui.layer;
                            //  layer.msg('玩命提示中');
                            // layer.load(0, {shade: false});//0代表加载的风格，支持0-2
                            layer.msg(data.msg,{icon : 2,time : 1200});
                        })

                    }
                },
                error:function () {

                    layui.use(['laypage', 'layer'], function () {
                        var laypage = layui.laypage, layer = layui.layer;
                        //  layer.msg('玩命提示中');
                        // layer.load(0, {shade: false});//0代表加载的风格，支持0-2
                        layer.msg("客户端请求非法",{icon : 2,time : 1200});
                    })

                }
            });
        }
        
    //数据展示
    function showOrderMessage(data) {
        //alert(data);
        var  sureusername = data.sureusername;      //收件人名字
        var  sureusertel = data.sureusertel;        //手机号
        var  address = data.address;                //详细地址
        var orderNum = data.orderNum;               //订单号
        var sureshopnum = data.sureshopnum;         //秒杀商品数量
        var orderdata = data.orderdata;               //下单时间
        var surepice = data.surepice;                //价格
        var goodid = data.goodid;                    //商品ID
        var goodname = data.goodname;               //商品名字
        var onelevelid = data.onelevelid;            //对应一级分类id
        var onelevelname = data.onelevelname;         //对应一级分类名称
        var twolevelid = data.twolevelid;            //对应二级分类Id;
        var twolevelname = data.twolevelname;        //对应二级分类名称
        var orderstatus = data.orderstatus;            //订单状态
        var priceurl = data.priceurl;                  //商品图片路径
        var flashorderid = data.flashorderid;     //订单Id
        var allpice = surepice*sureshopnum;
        $("#orderNum").text(orderNum);
        $("#orderTime").text(orderdata);
        $(".new-txt").text(sureusername);
        $(".new-txt-rd2").text(sureusertel);
        $(".street").text(address);

        $('#img_url_show').attr("src", priceurl)

        $('.item-price').text(surepice)
        $('.item-number').empty();
        $('.item-number').append('<span>×</span>'+sureshopnum);
        $('.item-amount').text("合计："+allpice);
       $('.item-basic-info').empty();
       $('.item-basic-info').append('<a href="#">'+
          '<p>'+goodname+'</p></a>'+
        '<p class="info-little">所属分类：<a href="#">'+onelevelname+'/</a>'+
        '<a href="#">'+twolevelname+'</a></p>')


        $(".m-progress-list").empty();
        $(".move-right").empty();
        if(orderstatus==0){//未付款
            //******************订单交易状态与交易操作*************
            $(".move-right").append(' <li class="td td-status">'+
                '<div class="item-status">'+
                '<p class="Mystatus">买家未付款</p>'+
                '</div>'+
                '</li>'+
                '<li class="td td-change">'+
                '<a href="javascript:goingPlay('+flashorderid+');"> <div class="am-btn am-btn-danger anniu" >'+
                '前往支付</div></a>'+
                '</li>');

            //**********进度条***********************
            $(".m-progress-list").append('<span class="step-3 step">'+
                '<em class="u-progress-stage-bg"></em>'+
                '<i class="u-stage-icon-inner">1<em class="bg"></em></i>'+
                '<p class="stage-name">未付款</p>'+
                '</span>'+
                '<span class="step-3 step">'+
                '<em class="u-progress-stage-bg"></em>'+
                '<i class="u-stage-icon-inner">2<em class="bg"></em></i>'+
                '<p class="stage-name">卖家发货</p>'+
                '</span>'+
                '<span class="step-3 step">'+
                '<em class="u-progress-stage-bg"></em>'+
                '<i class="u-stage-icon-inner">3<em class="bg"></em></i>'+
               '<p class="stage-name">确认收货</p>'+
                '</span>'+
                '<span class="step-4 step">'+
                '<em class="u-progress-stage-bg"></em>'+
                '<i class="u-stage-icon-inner">4<em class="bg"></em></i>'+
                '<p class="stage-name">交易完成</p>'+
                '</span>'+
                '<span class="u-progress-placeholder"></span>');

        }else if(orderstatus==1){//已付款
            //******************订单交易状态与交易操作*************
            $(".move-right").append(' <li class="td td-status">'+
                '<div class="item-status">'+
                '<p class="Mystatus">等待卖家发货</p>'+
                '</div>'+
                '</li>'+
                '<li class="td td-change">'+
                '</li>');

            //**********进度条***********************
            $(".m-progress-list").append('<span class="step-1 step">'+
                '<em class="u-progress-stage-bg"></em>'+
                '<i class="u-stage-icon-inner">1<em class="bg"></em></i>'+
                '<p class="stage-name">拍下商品</p>'+
                '</span>'+
                '<span class="step-3 step">'+
                '<em class="u-progress-stage-bg"></em>'+
                '<i class="u-stage-icon-inner">2<em class="bg"></em></i>'+
                '<p class="stage-name">卖家发货</p>'+
                '</span>'+
                '<span class="step-3 step">'+
                '<em class="u-progress-stage-bg"></em>'+
                '<i class="u-stage-icon-inner">3<em class="bg"></em></i>'+
                '<p class="stage-name">确认收货</p>'+
                '</span>'+
                '<span class="step-4 step">'+
                '<em class="u-progress-stage-bg"></em>'+
                '<i class="u-stage-icon-inner">4<em class="bg"></em></i>'+
                '<p class="stage-name">交易完成</p>'+
                '</span>'+
                '<span class="u-progress-placeholder"></span>');
        }else if(orderstatus == 2){//已发货
            //******************订单交易状态与交易操作*************
            $(".move-right").append(' <li class="td td-status">'+
                '<div class="item-status">'+
                '<p class="Mystatus">卖家已发货</p>'+
                '</div>'+
                '</li>'+
                '<li class="td td-change">'+
                '<a href="javascript:sureGoods('+flashorderid+');"><div class="am-btn am-btn-danger anniu" >'+
                '确认收货</div></a>'+
                '</li>');

            //**********进度条***********************
            $(".m-progress-list").append('<span class="step-1 step">'+
                '<em class="u-progress-stage-bg"></em>'+
                '<i class="u-stage-icon-inner">1<em class="bg"></em></i>'+
                '<p class="stage-name">拍下商品</p>'+
                '</span>'+
                '<span class="step-2 step">'+
                '<em class="u-progress-stage-bg"></em>'+
                '<i class="u-stage-icon-inner">2<em class="bg"></em></i>'+
                '<p class="stage-name">卖家发货</p>'+
                '</span>'+
                '<span class="step-3 step">'+
                '<em class="u-progress-stage-bg"></em>'+
                '<i class="u-stage-icon-inner">3<em class="bg"></em></i>'+
                '<p class="stage-name">确认收货</p>'+
                '</span>'+
                '<span class="step-4 step">'+
                '<em class="u-progress-stage-bg"></em>'+
                '<i class="u-stage-icon-inner">4<em class="bg"></em></i>'+
                '<p class="stage-name">交易完成</p>'+
                '</span>'+
                '<span class="u-progress-placeholder"></span>');
        }else if(orderstatus == 3){//确认收货
            //******************订单交易状态与交易操作*************
            $(".move-right").append(' <li class="td td-status">'+
                '<div class="item-status">'+
                '<p class="Mystatus">买家已收货</p>'+
                '<p class="Mystatus">交易完成</p>'+
                '</div>'+
                '</li>'+
                '<li class="td td-change">'+
                '<a href="javascript:deleteOrder('+flashorderid+');"><div class="am-btn am-btn-danger anniu" >'+
                '删除订单</div></a>'+
                '</li>');

            //**********进度条***********************
            $(".m-progress-list").append('<span class="step-1 step">'+
                '<em class="u-progress-stage-bg"></em>'+
                '<i class="u-stage-icon-inner">1<em class="bg"></em></i>'+
                '<p class="stage-name">拍下商品</p>'+
                '</span>'+
                '<span class="step-2 step">'+
                '<em class="u-progress-stage-bg"></em>'+
                '<i class="u-stage-icon-inner">2<em class="bg"></em></i>'+
                '<p class="stage-name">卖家发货</p>'+
                '</span>'+
                '<span class="step-2 step">'+
                '<em class="u-progress-stage-bg"></em>'+
                '<i class="u-stage-icon-inner">3<em class="bg"></em></i>'+
                '<p class="stage-name">确认收货</p>'+
                '</span>'+
                '<span class="step-2 step">'+
                '<em class="u-progress-stage-bg"></em>'+
                '<i class="u-stage-icon-inner">4<em class="bg"></em></i>'+
                '<p class="stage-name">交易完成</p>'+
                '</span>'+
                '<span class="u-progress-placeholder"></span>');
//        }else{//交易完成
//            //******************订单交易状态与交易操作*************
//            $(".move-right").append(' <li class="td td-status">'+
//                '<div class="item-status">'+
//                '<p class="Mystatus">卖家已发货</p>'+
//                '</div>'+
//                '</li>'+
//                '<li class="td td-change">'+
//                '<div class="am-btn am-btn-danger " >'+
//                '交易完成</div>'+
//                '</li>');
//
//            //**********进度条***********************
//            $(".m-progress-list").append('<span class="step-1 step">'+
//                '<em class="u-progress-stage-bg"></em>'+
//                '<i class="u-stage-icon-inner">1<em class="bg"></em></i>'+
//                '<p class="stage-name">拍下商品</p>'+
//                '</span>'+
//                '<span class="step-2 step">'+
//                '<em class="u-progress-stage-bg"></em>'+
//                '<i class="u-stage-icon-inner">2<em class="bg"></em></i>'+
//                '<p class="stage-name">卖家发货</p>'+
//                '</span>'+
//                '<span class="step-2 step">'+
//                '<em class="u-progress-stage-bg"></em>'+
//                '<i class="u-stage-icon-inner">3<em class="bg"></em></i>'+
//                '<p class="stage-name">确认收货</p>'+
//                '</span>'+
//                '<span class="step-2 step">'+
//                '<em class="u-progress-stage-bg"></em>'+
//                '<i class="u-stage-icon-inner">4<em class="bg"></em></i>'+
//                '<p class="stage-name">交易完成</p>'+
//                '</span>'+
//                '<span class="u-progress-placeholder"></span>');
       }

    }
    //***********************前往支付***********************
    function goingPlay(flashorderid) {
        $.ajax({
            url:"${path}/flashorder.action/updateuserpay",
            type:"GET",
            data:{
                uid:"${user.userid}",
                foid :flashorderid
            },
            success:function (data) {
                //  alert(data)
                if(data.code==0){//有活动数据
                    layui.use(['laypage', 'layer'], function () {
                        var laypage = layui.laypage, layer = layui.layer;
                        //  layer.msg('玩命提示中');
                        // layer.load(0, {shade: false});//0代表加载的风格，支持0-2
                        layer.msg("支付成功",{icon : 1,time : 1200},function () {
                           //进行页面刷新
                            getOrderMessage();
                        });
                    })
                    //alert(data.data);
                    // showtodayFlashSale(data.data);
                }else{//没有活动数据，返回错误信息
                    //alert(data.msg);
                    layui.use(['laypage', 'layer'], function () {
                        var laypage = layui.laypage, layer = layui.layer;
                        //  layer.msg('玩命提示中');
                        // layer.load(0, {shade: false});//0代表加载的风格，支持0-2
                        layer.msg(data.msg,{icon : 1,time : 1200},function () {
                            //进行页面刷新
                            getOrderMessage();
                        });
                    })
                }
            },
            error:function () {
                layui.use(['laypage', 'layer'], function () {
                    var laypage = layui.laypage, layer = layui.layer;
                    //  layer.msg('玩命提示中');
                    // layer.load(0, {shade: false});//0代表加载的风格，支持0-2
                    layer.msg("支付失败",{icon : 1,time : 1200},function () {
                        //进行页面刷新
                        getOrderMessage();
                    });
                })
            }
        });
    }
    //**************************确认收货*********************************
    function sureGoods(flashorderid) {
        $.ajax({
            url:"${path}/flashorder.action/updateusersurereceipt",
            type:"GET",
            data:{
                uid:"${user.userid}",
                foid :flashorderid
            },
            success:function (data) {
                //  alert(data)
                if(data.code==0){//有活动数据
                    layui.use(['laypage', 'layer'], function () {
                        var laypage = layui.laypage, layer = layui.layer;
                        //  layer.msg('玩命提示中');
                        // layer.load(0, {shade: false});//0代表加载的风格，支持0-2
                        layer.msg("操作成功",{icon : 1,time : 1200},function () {
                            //进行页面刷新
                            getOrderMessage();
                        });
                    })
                    //alert(data.data);
                    // showtodayFlashSale(data.data);
                }else{//没有活动数据，返回错误信息
                   // alert(data.msg);
                    layui.use(['laypage', 'layer'], function () {
                        var laypage = layui.laypage, layer = layui.layer;
                        //  layer.msg('玩命提示中');
                        // layer.load(0, {shade: false});//0代表加载的风格，支持0-2
                        layer.msg(data.msg,{icon : 2,time : 1200},function () {
                            //进行页面刷新
                            getOrderMessage();
                        });
                    })
                }
            },
            error:function () {
                layui.use(['laypage', 'layer'], function () {
                    var laypage = layui.laypage, layer = layui.layer;
                    //  layer.msg('玩命提示中');
                    // layer.load(0, {shade: false});//0代表加载的风格，支持0-2
                    layer.msg("客户端发送异常",{icon : 2,time : 1200},function () {
                        //进行页面刷新
                       // getOrderMessage();
                    });
                })
            }
        });
    }
    //***************************删除订单***********************
    function deleteOrder(flashorderid) {
        $.ajax({
            url:"${path}/flashorder.action/deleteorderuser",
            type:"GET",
            data:{
                uid:"${user.userid}",
                foid :flashorderid
            },
            success:function (data) {
                //  alert(data)
                if(data.code==0){//有活动数据
                    layui.use(['laypage', 'layer'], function () {
                        var laypage = layui.laypage, layer = layui.layer;
                        //  layer.msg('玩命提示中');
                        // layer.load(0, {shade: false});//0代表加载的风格，支持0-2
                        layer.msg("删除成功",{icon : 1,time : 1200},function () {
                            //进行页面刷新
                            window.location.href="${path}/order";
                        });
                    })
                    //alert(data.data);
                    // showtodayFlashSale(data.data);
                }else{//没有活动数据，返回错误信息
                   // alert(data.msg);
                    layui.use(['laypage', 'layer'], function () {
                        var laypage = layui.laypage, layer = layui.layer;
                        //  layer.msg('玩命提示中');
                        // layer.load(0, {shade: false});//0代表加载的风格，支持0-2
                        layer.msg(data.msg,{icon : 2,time : 1200},function () {
                            //进行页面刷新
                            getOrderMessage();
                        });
                    })
                }
            },
            error:function () {
               // alert("客户端请求有误");
                layui.use(['laypage', 'layer'], function () {
                    var laypage = layui.laypage, layer = layui.layer;
                    //  layer.msg('玩命提示中');
                    // layer.load(0, {shade: false});//0代表加载的风格，支持0-2
                    layer.msg("客户端请求异常",{icon : 2,time : 1200},function () {
                        //进行页面刷新
                        getOrderMessage();
                    });
                })
            }
        });
    }

</script>
</body>

</html>
